Font Awesome图标安装及使用方法 |
您所在的位置:网站首页 › font awesome 图标怎么用 › Font Awesome图标安装及使用方法 |
fontawesome图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 今天烽烟就来介绍下fontawesome图标的安装方法及使用方法。 Font Awesome 特性 479个图标:只需一种字体,同时拥有多个图标 无需JavaScript:Font Awesome不依赖于JS,同时中文版奥森提供了IE7+以上兼容性 解决方案:可无限放大缩小,使用和普通字体一样自由便捷,可任意缩放 完全免费:完全免费,可以用于商业用途, SIL OFL 1.1 协议 CSS可控性:通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 完全兼容视网膜屏:由于fontawesome是矢量字体,可以完全兼容视网膜屏 良好兼容性:能和Bootstrap等常用UI框架一起使用,奥森(Font Awesome中文)兼容IE7+ 桌面应用:可以用于桌面应用中 兼容屏幕阅读器:不像其它字体那样, 它可以兼容屏幕阅读器。 安装 1.下载Font Awesome最新安装包。 2.在 标签 里, 引入 font-awesome.min.css.(具体路径是你的情况而定) 只需要这两步你就可以在主题中调用fontawesome图标了,对于使用烽烟主题的朋友可以忽略这部。 使用引入fontawesome以后,你可以把标签用在各个地方! 1.例如基本图标:复制以下代码到你的html里 fa-camera-retro你可以通过css控制图标的font-size,color,阴影等 2.Larger Icons:你可以使用 fa-lg (增加33%), fa-2x, fa-3x, fa-4x, or fa-5x 这些类等比缩放图标大小. fa-lg fa-2x fa-3x fa-4x fa-5x如果发现图标上下有被隐藏的情况,你可以通过适当增加 line-height来解决. 3.固定宽度图标:使用 fa-fw可以固定图标宽度 ; Home ; Library ; Applications ; Settings4.列表图标:使用 fa-ul and fa-li 如下 List icons can be used as bullets in lists5.有边框 & 漂浮 图标:fa-border 和 pull-right 或者 pull-left 组合使用 ...tomorrow we will run faster, stretch out our arms farther...And then one fine morning— So we beat on, boats against thecurrent, borne back ceaselessly into the past.6.旋转图标:fa-spin 和 fa-spinner, fa-refresh, fa-cog组合 只支持IE10+7.翻转图标 normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal icon-flip-vertical8.叠加图标 fa-twitter on fa-square-o fa-flag on fa-circle fa-terminal on fa-square fa-ban on fa-camera
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |